<script setup lang="ts">
import { RouterView } from 'vue-router'
import { onMounted, reactive, ref } from 'vue';
import menuRoutes from './router/webSite';
import leaveMsgForm from './components/forms/leaveMsgForm.vue';

onMounted(() => {
})

//菜单
const menus = reactive(menuRoutes);

const dialogFormVisible = ref(false);
function operatorDialogForm(value: boolean) {
  dialogFormVisible.value = value;
}

</script>

<template>
  <el-dialog v-model="dialogFormVisible" title="留言" width="500">
    <leaveMsgForm @closedialog-form="operatorDialogForm"></leaveMsgForm>
  </el-dialog>

  <div class="main">
    <div class="header">
      <div class="header-logo">
      </div>
      <div class="header-menu">
        <router-link :key="item.path" v-for="item in menus" :to="item.meta.url">{{ item.meta.name
          }}</router-link>
      </div>

      <div class="header-contact">
        <a class="contact" @click="operatorDialogForm(true)">Message Me</a>
      </div>

    </div>
    <div class="main_content" ref="mainContent">
      <RouterView />
    </div>

    <div class="footer">
      <div class="footer_left">
        <p>
          ©2025 此网站由站主一人开发和部署
        </p>
        <p>
          <!-- 京公网安备11011402054421号
          京ICP备19051325号-2 -->
        </p>
      </div>
      <div class="footer_right">
        <div></div>
        <div>
          <a href="mailto:contact@1733236643@qq.com">
            <svgIcon name="email"></svgIcon>
          </a>
        </div>
        <div>
          <a href="https://github.com/" target="_blank">
            <svgIcon name="github"></svgIcon>
          </a>
        </div>
        <div>
          <a href="https://www.bilibili.com/" target="_blank">
            <svgIcon name="bilibili"></svgIcon>
          </a>
        </div>
        <div>
          <a href="https://discord.com/" target="_blank">
            <svgIcon name="discord"></svgIcon>
          </a>
        </div>
      </div>
    </div>
  </div>

</template>

<style lang="scss" scoped>
.main {

  .header {
    background-color: $bgColor;
    width: 100%;
    z-index: 9999;
    height: 80px;
    position: fixed;
    display: flex;
    flex-direction: row;

    .img {
      width: 30px;
      height: 30px;
      position: absolute;
      background-image: url("/public/img/home/mouse.gif");
      background-size: cover;
    }

    .header-logo {
      flex: 2;
    }

    .header-menu {
      flex: 5;
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      justify-content: space-around;

      a {
        cursor: pointer;
        z-index: 999;
        position: relative;
        left: 10px;
        top: 20px;
        padding: 10px 30px;
        top: 50%;
        transform: translateY(-90%);
        color: #21ebff;
        text-decoration: none;
        font-size: 20px;
        transition: .5s;

        &::before {
          z-index: 999;
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          height: 10px;
          width: 10px;
          border-left: 2px solid $color-21ebff;
          border-top: 2px solid $color-21ebff;
          transition: .5s;
        }

        &::after {
          z-index: 999;
          content: '';
          position: absolute;
          bottom: 0;
          right: 0;
          height: 10px;
          width: 10px;
          border-right: 2px solid $color-21ebff;
          border-bottom: 2px solid $color-21ebff;
          transition: .5s;
        }

        &:hover::before,
        &:hover::after {
          width: 98%;
          height: 95%;
        }

        &:hover {
          background-color: $color-21ebff;
          color: #111;
          box-shadow: 0 0 50px #21ebff;
          transition-delay: .5s;
        }
      }

    }

    .header-contact {
      flex: 1;
      text-align: center;

      .contact {
        cursor: pointer;
        vertical-align: middle;
        position: relative;
        top: 30px;
        color: white;
        font-size: 15px;
        padding: 11px 20px;
        border: 2px solid transparent;
        letter-spacing: .1em;
        transition: all 0.3s ease;

        &:hover {
          color: black;
          letter-spacing: .15em;
          border: 2px solid #b1c8ff;
          background-color: aliceblue;
          font-weight: bold;
        }
      }
    }

  }

  .main_content {
    width: 100%;
  }

  .footer {
    position: relative;
    z-index: 999999;
    width: 100%;
    height: 79px;

    display: flex;
    background: transparent;

    .footer_left {
      flex: 1;
      padding-left: 30px;
      margin-top: 30px;

      p {
        line-height: 30px;
        font-size: 20px;
      }
    }

    .footer_right {
      flex: 2;
      background-color: transparent;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;

      div {
        font-size: 20px;
        flex: 1;
        text-align: center;

        svg {
          width: 70px;
          height: 50px;
        }

        a {
          display: inline-block;
          transition: transform 0.3s ease;
        }

        a:hover {
          transform: translateY(-10px);
          color: blue;
        }
      }
    }
  }
}
</style>
